import { ref, Ref, unref, onMounted, watch } from "vue";
import { getStorage, setStorage } from "@/util/storage";
import { MayBeRef } from "@model/util";
/**
 *
 */
export default function <T = any>(
	key: string,
	value: MayBeRef<T>,
	stroage: "location" | "session" = "location",
): Ref<T> {
	const storage = ref(unref(value)) as Ref<T>;
	onMounted(() => {
		const data = getStorage<T>(key, stroage);
		data && (storage.value = data);
	});
	watch(storage, value => {
		setStorage(key, value, stroage);
	});
	return storage;
}
